<template>
  <div class="app-container">
    <!--    {{id}}-->
    <el-form ref="form" :model="user" label-width="80px">
      <el-form-item label="用户姓名">
        <el-input v-model="user.username"  style="width: 217px;" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="用户余额">
        <el-input v-model="user.money"  style="width: 217px;" :disabled="true"></el-input>
      </el-form-item>


      <el-form-item>
        <!--        给修改前加上一个判断条件 是否需要修改-->
        <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
          充值
        </el-button>
        <el-button @click="cancel">取消</el-button>



        <el-drawer
          :visible.sync="drawer"
          :with-header="false">
          <el-form ref="form" :model="newUser" label-width="80px">
            <el-form-item label="充值金额">
              <el-input v-model="newUser.money"  style="width: 217px;" ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="onSubmit">充值</el-button>
            </el-form-item>
          </el-form>
        </el-drawer>




      </el-form-item>




    </el-form>

  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "RechargeView",
  data(){       //data:{}
    return {
      user:{
        id:'',
        username:'',
        money:0,
      },
      drawer: false,
      newUser:{
        money:0,
      }
    }
  },
  //获取数据   获取自己的余额
  created(){
    this.getData()
  },

  methods: {
    //修改数据
    onSubmit() {
      if (this.newUser.money == '') {
        this.$message({
          message: '请输入充值金额',
          type: 'error'
        });
        return
      }
      this.$confirm('是否充值?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        var formData = new FormData();
        formData.append("username", this.$store.state.user.name)
        formData.append("money", this.newUser.money)

        axios({
          url: '/api/user/AddMoney',
          method: 'post',
          data: formData,
          headers:{"Authorization":"Bearer "+this.$store.state.user.token}
        }).then(res => {
          if (res.data.code == 1) {
            this.$message({
              message: '充值成功',
              type:'success'
            });
            this.getData()

          }else {
            this.$message({
              message: '充值失败,请稍后再试',
              type: 'error'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });

    },
    //
    getData() {
      //通过全局域获取用户信息
      var formData = new FormData();
      formData.append("username", this.$store.state.user.name)
      //queryUser
      axios({
        url: '/api/user/queryUser',
        method: 'post',
        data: formData,
        headers:{"Authorization":"Bearer "+this.$store.state.user.token}
      }).then(res => {
        // console.log(res.data.data)
        this.user=res.data.data

      })
    },


    //返回
    cancel() {
      this.$router.push("/user")
    },




  }


}
</script>

<style scoped>

</style>
